<template>
  <div class="home">
    <h1>市属国有重点企业生产安全事故月度统计表</h1>
    <h2>一、2023年11月生产安全事故情况</h2>
    <div id="tableDataProAccident">
      <el-table :data="tableData" border>
        <el-table-column prop="index" label="起数(起)" align="center" />
        <el-table-column prop="index" label="死亡(含失踪人)" align="center" />
        <el-table-column prop="index" label="受伤(人)" align="center" />
        <el-table-column prop="index" label="直接经济损失(万元)" align="center" />
        <el-table-column label="其中死亡事故" align="center">
          <el-table-column label="一次死亡(1-2人)" align="center">
            <el-table-column prop="index" label="起数(起)" align="center" />
            <el-table-column prop="index" label="死亡(人)" align="center" />
          </el-table-column>
          <el-table-column label="一次死亡(3-9人)" align="center">
            <el-table-column prop="index" label="起数(起)" align="center" />
            <el-table-column prop="index" label="死亡(人)" align="center" />
          </el-table-column>
          <el-table-column label="一次死亡(30人以上)" align="center">
            <el-table-column prop="index" label="起数(起)" align="center" />
            <el-table-column prop="index" label="死亡(人)" align="center" />
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- <p class="remark">备注: {{ remark }}</p> -->
    </div>
    <el-button class="export-btn" @click="exportTableProAccident">导出2023年11月生产安全事故情况</el-button>
    <h2>二、2023年11月安全生产工作情况</h2>
    <div id="tableDataSafeWork">
      <div id="tableDataSafeWork1">
        <el-table :data="tableData" border>
          <el-table-column label="重大危险源等级建档" align="center">
            <el-table-column prop="index" label="(处)" align="center" />
          </el-table-column>
          <el-table-column label="对危险源定期评估与检测" align="center">
            <el-table-column prop="index" label="(次)" align="center" />
          </el-table-column>
          <el-table-column label="组织开展安全检查" align="center">
            <el-table-column prop="index" label="(次)" align="center" />
          </el-table-column>
          <el-table-column label="查出安全生产隐患" align="center">
            <el-table-column prop="index" label="(处)" align="center" />
          </el-table-column>
          <el-table-column label="治理安全生产隐患" align="center">
            <el-table-column prop="index" label="(处)" align="center" />
          </el-table-column>
          <el-table-column label="生产岗位职工人数" align="center">
            <el-table-column prop="index" label="(人)" align="center" />
          </el-table-column>
          <el-table-column label="安全生产职工培训" align="center">
            <el-table-column prop="index" label="(人)" align="center" />
          </el-table-column>
          <el-table-column label="安全生产投入资金" align="center">
            <el-table-column prop="index" label="(万元)" align="center" />
          </el-table-column>
        </el-table>
      </div>
      <div id="tableDataSafeWork2">
        <el-table :data="tableData" border class="table-bottom">
          <el-table-column label="安全生产专题会议" align="center">
            <el-table-column prop="index" label="(次)" align="center" />
          </el-table-column>
          <el-table-column label="处理事故责任人" align="center">
            <el-table-column prop="index" label="(人)" align="center" />
          </el-table-column>
          <el-table-column label="安全生产未遂事故" align="center">
            <el-table-column prop="index" label="(件)" align="center" />
          </el-table-column>
          <el-table-column label="安全生产未遂事故处理" align="center">
            <el-table-column prop="index" label="(件)" align="center" />
          </el-table-column>
        </el-table>
      </div>
      <el-button class="export-btn" @click="tableDataSafeWork1">导出2023年11月生产安全事故情况(上)</el-button>
      <el-button class="export-btn" @click="tableDataSafeWork2">导出2023年11月生产安全事故情况(下)</el-button>
    </div>
  </div>
</template>

<script>
import exportTableUtil from '@/utils/exportTableUtil.js'
import XLSX from 'xlsx'
export default {
  name: 'HomeView',
  data() {
    return {
      tableData: [{ index: 1 }],
      remark: '这是一段备注'
    }
  },
  methods: {
    // 只有一行表头的调用
    // exportData() {
    //   let elt = document.getElementById("exportData");
    //   exportTableUtil.exportTable(elt, "找头区物料异常表", "找头区物料异常表导出", 1);
    // },
    // 稍微简单--但导出样式有点小问题 还需要引入东西，还有一个js
    // 有多行表头的调用
    exportTableProAccident() {
      let elt = document.getElementById("tableDataProAccident")
      exportTableUtil.exportTable(elt, "市属国有重点企业生产安全事故月度统计表", "一、2023年11月生产安全事故情况", 3)
    },
    tableDataSafeWork1() {
      let elt = document.getElementById("tableDataSafeWork1")
      exportTableUtil.exportTable(elt, "重大危险源等级建档", "对危险源定期评估与检测", 2)
    },
    tableDataSafeWork2() {
      console.log(1)
    },
  }
}
</script>
<style lang="scss" scoped>
.home {

  h1,
  h2 {
    text-align: center;
  }

  .remark {
    text-align: left;
    padding: 0 0 0 6px;
    margin: -1px 0 0 0;
    height: 36px;
    line-height: 36px;
    border: 1px solid #EBEEF5;
    border-top-color: transparent;
  }

  .table-bottom {
    margin-top: -1px;
  }

  .export-btn {
    margin-top: 20px;
  }
}
</style>